<!--index.art-->
{{extend './layout/layout.html'}} {{block 'body'}}
<div class="settings-page" id="settings">
  <div class="container page">
    <div class="row">
      <div class="col-md-6 offset-md-3 col-xs-12">
        <h1 class="text-xs-center">Your Settings</h1>

        <form>
          <fieldset>
            <fieldset class="form-group">
              <input
                class="form-control"
                type="text"
                v-model="user.image"
                placeholder="URL of profile picture"
              />
            </fieldset>
            <fieldset class="form-group">
              <input
                class="form-control form-control-lg"
                type="text"
                v-model="user.username"
                placeholder="Your Name"
              />
            </fieldset>
            <fieldset class="form-group">
              <textarea
                class="form-control form-control-lg"
                rows="8"
                v-model="user.bio"
                placeholder="Short bio about you"
              ></textarea>
            </fieldset>
            <fieldset class="form-group">
              <input
                class="form-control form-control-lg"
                type="text"
                v-model="user.email"
                placeholder="Email"
              />
            </fieldset>
            <fieldset class="form-group">
              <input
                class="form-control form-control-lg"
                type="password"
                v-model="user.password"
                placeholder="Password"
              />
            </fieldset>
            <button
              class="btn btn-lg btn-primary pull-xs-right"
              type="button"
              @click="updateSettings"
            >
              Update Settings
            </button>
          </fieldset>
        </form>
        <hr />
        <a href="/logout">
          <button class="btn btn-outline-danger">
            Or click here to logout.
          </button>
        </a>
      </div>
    </div>
  </div>
</div>
{{/block}} {{ block "script" }}
<script>
  (() => {
    const app = new Vue({
      el: "#settings",
      data: {
        user: {
          image: "",
          username: "",
          bio: "",
          email: "",
          password: "",
        },
      },
      methods: {
        async updateSettings() {
          // 1. 客户端表单验证
          // 2. 验证通过，提交表单
          try {
            // axios 默认提交的数据格式 application/json
            const { data } = await axios.post("/settings", {
              user: this.user,
            });

            window.location.href = "/login";
          } catch (err) {
            if (err.response.status === 400) {
              this.errors = err.response.data.errors;
            }
          }
        },
      },
    });
  })();
</script>
{{ /block }}
